<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>我的甜品，你的爱~</title>
    <link rel="stylesheet" href="/fore/css/index.css" >
    <script src="/fore/js/jquery.min.js" ></script>
    <script src="/fore/js/LiftEffect.js" ></script>
    <style>
        a, a:visited {
            color: #E54028;
            text-decoration: none;
        }
        a:hover {
            color: #c22d18;
            cursor: pointer;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .lift-nav{
            position: fixed;
            top: 100px;
            left: 30px;
            display: none;
        }
        .lift-nav li{
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            padding: 10px 10px;
            margin-bottom: 10px;
            background: skyblue;
            cursor: pointer;
        }

        .lift-nav li.current{
            background:#fb0000;
        }

    </style>

    <script src="/fore/js/jquery-v1.10.2.min.js" type="text/javascript"></script>
    <script src="/fore/js/modernizr-custom-v2.7.1.min.js"  type="text/javascript"></script>
    <script src="/fore/js/jquery-finger-v0.1.0.min.js" type="text/javascript"></script>
    <link href="/fore/css/flickerplate.css"  type="text/css" rel="stylesheet">
    <script src="/fore/js/flickerplate.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $('.flicker-example').flicker();
        });
    </script>
</head>

<body>
<!--页头-->
<div th:replace="fore/include/header::head"></div>
<div id="headCon" >
    <div class="flicker-example" data-block-text="false">
        <ul>
            <li  th:each="res:${advert}" th:data-background="${res.picture}">
            </li>
        </ul>
    </div>
</div>
<div id="contentCon">
    <ul>
        <li class="quan">
            <div></div>
            <p>会员领券</p>
        </li>
        <li class="gexing">
            <div></div>
            <p>个性定制</p>
        </li>
        <li class="fuli">
            <div></div>
            <p>优惠福利</p>
        </li>
    </ul>
    <ol>

        <li th:each="res:${recommend}">
            <a th:href="@{/fore/product/detail(productId=${res.id})}"  class="yoghourt">
                <img  th:src="${res.picture}" alt="">
            </a>
            <div>
                <span>推荐</span>
                <p th:text="${res.name}"></p>
            </div>
        </li>
    </ol>
    <div class="t1">
        <ul>
            <li></li>
            <p>爱之使者</p>
            <a href="javascript:;" >+MORE</a>
        </ul>
        <ol>
            <li class="ice">
                <a href="javascript:;"></a>
                <div>乌云红心冰淇淋</div>
            </li>
            <li class="zhenzi">
                <a href="javascript:;"></a>
                <div class="container">
                    <a href="javascript:;"  class="dangao"><p>爱心小蛋糕</p></a>
                    <a href="javascript:;" class="bang"><p>星空棒棒糖</p></a>
                </div>
            </li>
            <li class="makalong">
                <a href="javascript:;" ></a>
                <div>爱心马卡龙</div>
            </li>
        </ol>
    </div>
    <div class="t2">
        <ul>
            <li></li>
            <p>饭后小憩</p>
            <a href="javascript:;" >+MORE</a>
        </ul>
        <ol>
            <li class="paofu">
                <a href="javascript:;" >
                    <div>
                        <span></span>
                        <p>泡芙</p>
                    </div>
                </a>
            </li>
            <li>
                <ol>
                    <a href="javascript:;"  class="quqi">
                        <div>
                            <p>坚<br>果<br>曲<br>奇</p>
                        </div>
                    </a>
                    <a href="javascript:;" class="paofu">
                        <div>
                            <p>牛<br>油<br>泡<br>芙</p>
                        </div>
                    </a>
                    <a href="javascript:;"  class="niuiaobao">
                        <div>
                            <p>牛<br>角<br>包</p>
                        </div>
                    </a>
                </ol>
                <ol>
                    <a href="javascript:;"  class="banji">
                        <div>
                            <p>芒<br>果<br>班<br>戟</p>
                        </div>
                    </a>
                    <a href="javascript:;"  class="danta">
                        <div>
                            <p>葡<br>式<br>蛋<br>挞</p>
                        </div>
                    </a>
                    <a href="javascript:;" class="moti">
                        <div>
                            <p>抹<br>茶<br>摩<br>提</p>
                        </div>
                    </a>
                </ol>
            </li>
        </ol>
    </div>
    <div class="t3">
        <ul>
            <li></li>
            <p>夏日良品</p>
            <a href="javascript:;">+MORE</a>
        </ul>
        <ol>
            <li class="left">
                <a href="javascript:;" ></a>
            </li>
            <li>
                <ol>
                    <li>
                        <a href="javascript:;"  class="shumei">
                            <div>
                                <span>
                                    <p>八宫格</p>
                                    <i></i>
                                    <div>树莓棒冰</div>
                                </span>
                            </div>
                        </a>
                        <a href="javascript:;" class="shuiguo">
                            <div>
                                <span>
                                    <p>自制系列</p>
                                    <i></i>
                                    <div>水果棒冰</div>
                                </span>
                            </div>
                        </a>
                    </li>
                </ol>
                <ol>
                    <li>
                        <a href="javascript:;"  class="ha">
                            <div>
                                <span>
                                    <p>哈根达斯</p>
                                    <i></i>
                                    <div>巧克力冰淇淋</div>
                                </span>
                            </div>
                        </a>
                        <a href="javascript:;"  class="xu">
                            <div>
                                <span>
                                    <p>许留山</p>
                                    <i></i>
                                    <div>芒果冰淇淋</div>
                                </span>
                            </div>
                        </a>
                    </li>
                </ol>
            </li>
            <li class="right">
                <a href="javascript:;" >
                    <div>
                        <p>新品上市</p>
                        <i></i>
                        <span>薰衣草冰品</span>
                    </div>
                </a>
            </li>
        </ol>
    </div>
    <div class="t4">
        <ul>
            <li></li>
            <p>养生系列</p>
            <a href="javascript:;" >+MORE</a>
        </ul>
        <ol>
            <li>
                <a href="javascript:;"  class="tao"></a>
            </li>
            <li>
                <a href="javascript:;" class="shanyao">
                    <div>
                        <p>红豆山药糕</p>
                    </div>
                </a>
                <a href="javascript:;"  class="gui">
                    <div>
                        <p>龟 苓 膏</p>
                    </div>
                </a>
            </li>
        </ol>
    </div>
 

</div>
<!--页脚-->
<div th:replace="fore/include/footer::foot"></div>

<script>

    $(function(){
        LiftEffect({
            "control1": ".lift-nav", 						  //侧栏电梯的容器
            "control2": ".lift",                           //需要遍历的电梯的父元素
            "target": [".t1",".t2",".t3",".t4",".t5",".t6"], //监听的内容，注意一定要从小到大输入
            "current": "current" 						  //选中的样式
        });


    })
</script>
<style>
    .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>
</html>
